import {ref,reactive,computed,type Ref} from 'vue'
import { useInit } from '@/common/stores'
import {
		storeToRefs
	} from 'pinia'
import  { useLayout,type AppContext } from '@/common/hooks'
// import {
// 		GET_MENU_HEIGHT
// 	} from '@/env'

	
	
	
export const useTabbarHeader = (tabbarPageIndex:Ref<number>) => {
	// #ifdef MP-WEIXIN ||MP-ALIPAY
	const menuButtonInfo = ref<any>(uni.getMenuButtonBoundingClientRect() || {})
	// #endif
	// #ifdef H5 || APP-PLUS
	const menuButtonInfo = ref<any>({
		top: uni.getSystemInfoSync().statusBarHeight || 0
	})
	// #endif
	
	// const viewStyle = computed(() => {
	// 	// #ifdef MP-WEIXIN || APP-PLUS
	// 	return {
	// 		paddingTop: `${GET_MENU_HEIGHT(menuButtonInfo.value)}px`
	// 	}
	// 	// #endif
		
	// 	return {}
	// })
	
	
	const tabbarHeaderColor = reactive<{
		bgColor:string,
		textColor:string,
		index:number
	}[]>([])
	const headerStyle = computed(() => {
		const item = tabbarHeaderColor.find(item => item.index === tabbarPageIndex.value)
		let backgroundColor = item?.bgColor || '#fff'
		let textColor = item?.textColor || '#000'
		// #ifdef  MP-WEIXIN||MP-ALIPAY||APP-PLUS
		return {
			color:textColor,
			backgroundColor
		}
		// #endif
		return {
			
		}
	})


	const setTabbarHeaderColor = (bgColor:string,textColor:string,index:number) => {
		let _index = tabbarHeaderColor.findIndex(item => item.index === index)
		if(_index === -1){
			_index = tabbarHeaderColor.length
		}
		tabbarHeaderColor.splice(_index,1,{
			bgColor,
			textColor,
			index
		})
	}
	
	return {
		menuButtonInfo,
		headerStyle,
		setTabbarHeaderColor
	}
}

export const useLayoutMainPage = (ctx:AppContext,isHome = false) => {
	const initStore = useInit()
	const {
		tabbarPage,
		pageLoading
	} = storeToRefs(initStore)
	const {
		componentsList,
		pageStyle,
		setPageBackgroundImage,
		advertisingSetting,
		mpShare,
		setPageOption,
		isDefaultShare
	} = useLayout(ctx)
	
	const getPageInfo = async (pageType:number,isRefresh = false) => {
		if (tabbarPage.value.length && !isRefresh) {
			setPageOption(tabbarPage.value.find(item => item.pageType == pageType)!)
		} else {
			await initStore.getAppConfig(isRefresh)
			setPageOption(tabbarPage.value.find(item => item.pageType == pageType)!,isRefresh)
		}
	}
	
	return {
		tabbarPage,
		pageLoading,
		componentsList,
		pageStyle,
		setPageBackgroundImage,
		advertisingSetting,
		mpShare,
		setPageOption,
		isDefaultShare,
		getPageInfo
	}
}